<template>
	<view class="f28 refund-page-con">
		<view>
			<view v-if="orderData.status == 4 || orderData.status == 7" class="padding36 mb15">
				<view class="color-orange f33">待退款</view>
				<view class="grey-tips">{{orderData.status == 4?'退款金额':'押金'}}
					{{orderData.refund_order.refund_amount}}加元，将于10个工作日内退回至原支付账户</view>
			</view>
			<view v-if="orderData.status == 5 || orderData.status == 6" class="padding36 mb15">
				<view class="color-orange f33">退款成功 {{$timestampToTime(orderData.refund_order.refunded_at,1)}}</view>
				<view class="grey-tips">退款金额{{orderData.refund_order.refund_amount}}加元，已退回至原支付账户</view>
			</view>


			<view class="padding36">
				<view class="my-m-title  mb20">退款信息</view>
				<view class="mb20 refund-item flex-between">
					<span class="refund-item-index">1</span>
					<span class="refund-item-title">押金实付</span>
					<span class="grey-tips">{{orderData.deposit}}加元</span>
				</view>
				<view class="mb20 refund-item flex-between">
					<span class="refund-item-title">退款申请</span>
					<span class="grey-tips">{{$timestampToTime(orderData.refund_order.created_at, 1)}} </span>
				</view>



				<view v-if="orderData.internal_status == 5">
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-index">2</span>
						<span class="refund-item-title">房租实付</span>
						<span class="grey-tips">{{orderData.rent_paid}}加元</span>
					</view>
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">退款原因</span>
						<span class="grey-tips">{{orderData.refund_order.reason}} </span>
					</view>
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">退款申请</span>
						<span class="grey-tips">{{$timestampToTime(orderData.refund_order.created_at,1)}} </span>
					</view>
				</view>

				<van-divider :margin="20" />
				
				<view v-if="Number(orderData.refund_order.penalty )">
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">赔偿金</span>
						<span>
							<span @click="viewPenalty" class="color-orange">查看损坏追诉</span>
							<span class="grey-tips ml10">{{orderData.refund_order.penalty || 0 }}加元 </span>
						</span>
					</view>
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">退款金额</span>
						<span class="grey-tips">{{orderData.refund_order.refund_amount}} 加元</span>
					</view>
					
				</view>

				<view v-else>
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">合计金额</span>
						<span class="grey-tips">{{orderData.fee}}加元 </span>
					</view>
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">违约金</span>
						<span>
							<span class="grey-tips">{{orderData.refund_order.liquidated_damages}}加元 </span>
							<van-icon  @click="showTips" v-if="Number(orderData.refund_order.liquidated_damages)" class="ml10" color="#ec8403" name="warning-o" />
						</span>
					</view>
					<view class="mb20 refund-item flex-between">
						<span class="refund-item-title">退款金额</span>
						<span class="grey-tips">{{orderData.refund_order.refund_amount}} 加元</span>
					</view>
				</view>



			</view>




			<view class="money-tips ">
				<view>温馨提示</view>
				<span v-html="refundInfo"></span>
			

			</view>
		</view>
		<van-dialog confirm-button-class="color-orange" id="van-dialog" />
	</view>

</template>

<script>
	import Dialog from 'wxcomponents/vant/dialog/dialog';
	export default {
		data() {
			return {
				orderData: this.$getStorage('orderData'),
				refundInfo: ''
			}
		},
		methods: {
			showTips() {
				
				Dialog.alert({
					message: Number(this.orderData.discount)? '本订单享受优惠，取消订单房租不退': '入住前15天内取消订单，房租不退',
				}).then(() => {
					// on close
				});
			},
			viewPenalty() {
				this.$goPage(1, '/subOrder/damageDetail');
			},
			getConfiguration() {
				this.$http.getConfiguration().then(res => {
					res.forEach(item => {
						if (item.type == 'refund-policy') {
							this.refundInfo = item.content;
						}
					})
				});
			},

			nextStep() {
				// if(!this.radio) {
				//  this.$toast('请选择取消订单原因');
				//  return;
				// }
				// this.showDialog();
			}
		},
		mounted() {
			this.getConfiguration();
		}
	}
</script>

<style scoped lang="scss">
	.refund-page-con {
		background: rgba(136, 136, 136, 0.1)
	}

	.padding36 {
		background: #fff;
	}

	.refund-item {
		position: relative;

		.refund-item-title {
			padding-left: 80rpx;
		}

		.refund-item-index {
			position: absolute;
			left: 0;
			width: 31rpx;
			height: 33rpx;
			text-align: center;
			line-height: 33rpx;
			background: #222222;
			color: #fff;
		}

	}


	.money-tips {
		width: 100%;
		font-weight: bold;
		font-size: 27rpx;
		padding: 60rpx 36rpx;
		// height:  220rpx;
		color: #999;
		display: inline-block;
		box-sizing: border-box;

		.tips-item {
			display: flex;

			span {
				display: inline-block;
				vertical-align: top;
			}
		}
	}
</style>